<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <Echart id="rightTop" :options="option" class="right_top_inner" ref="charts" />
</template>

<script>
import { get } from "api";

export default {
  data() {
    return {
      option: {}
    };
  },
  props: {
    infoData: {
      type: Array,
      default: () => []
    },
    echartName: {
      type: String,
      default: ""
    }
  },
  watch: {
    infoData: {
      handler(newData) {
        this.init(newData); // 重新渲染图表
      },
      deep: true
    }
  },
  created() {},

  mounted() {
    this.getData();
  },
  beforeDestroy() {},
  methods: {
    getData() {
      // this.pageflag = true;
      // get("/admin/rifCount").then(res => {
      //   if (res.code == 200) {
          this.init(this.infoData);
      //   } else {
      //     this.pageflag = false;
      //     this.$Message({
      //       text: res.msg,
      //       type: "warning"
      //     });
      //   }
      // });
    },
    init(data) {
      this.option = {
         tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: 0,
          right: 0,
          top: "12%", // 增加顶部的空间
          bottom: "0", // 增加底部的空间
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: data.map(t => t.name),
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#7C8491"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          },
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#7C8491"
            }
          }
        },
        series: [
          {
            name:this.echartName,
            data: data.map(t => t.value),
            barWidth: 24,
            type: "bar",
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    //只要修改前四个参数就ok
                    offset: 0,
                    color: "#76C6FF"
                  }, //柱图渐变色
                  {
                    offset: 1,
                    color: "#3A91FF"
                  }
                ])
              }
            }
          }
        ]
      };
    }
  }
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>